import React, { Component } from 'react';
import reqwest from 'reqwest';
import config from '../Config';
import './product1.css';
import Title from '../components/section-title';

class Product1 extends Component {
	static defaultProps = {
		products: []
	}
	render() {
		var renderProducts = [];
		var len = this.props.products.length;
		for(var i = 0; i < len; i++){
			var data = this.props.products[i];
			var imgurl = data.img;
			renderProducts.push(<ul key={i} className="product-box">
				<li className="col-md-3">
					<img src={imgurl} alt=""/>
					<Title title="强大的控制面板" subtitle="深度客制化的控制面板 / 客户中心，使得交互界面得心应手、速度非凡、强大的主机面板。"/>
				</li>
			</ul>)
		}
		return(
			<div className="product1">
				{renderProducts}
			</div>
		)
	}
}

class Product1Block extends Component {
	constructor(props) {
		super(props);
		this.state = {
			products: []
		}
	}

	loadProduct(){
		var self = this;
		const url = config.base_url + '/icons';
		reqwest({
			url:url,
			type: 'json',
			crossOrigin: true,
			error: err => {
				console.error(err);
			},
			success: data => {
				self.setState({
					products: data.icons
				})
			}
		})
	}

	componentDidMount() {
		this.loadProduct()
	}

	render() {
		return (
			<Product1 products={this.state.products}></Product1>
		)
	}
}
export default Product1Block;